<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="/static/css/shoppingcart/reset.css">
    <link rel="stylesheet" href="/static/css/shoppingcart/carts.css">
    <link rel="stylesheet" href="/static/css/iconfont.css">
    <link rel="stylesheet" href="/static/css/index.css">
    <script src="/static/plugins/jquery/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="top-nav">
    <div class="w clearfix">
        <div class="login" id="loginuser">
            <a id="login" target="_self" href="login.html" class="h">您好，请登录</a>
            <a id="register" target="_blank" href="login.html" href="#">免费注册</a>
        </div>
        <ul class="nav-list">
            <li>
                <a href="#" class="link" id ="myOrder">我的订单<span style="color: red;"><b
                                id="orderNum"></b></span></a>
            </li>
            <li>
                <a href="/cart.html" class="link" target="_blank">购物车<span style="color: red;"><b id="cartNum"></b></span></a>
            </li>
            <li>
                <a href="http://localhost:8888/static/login.html" class="link">供应商后台</a>
            </li>
            <li>
                <a href="#" class="link">收藏夹</a>
            </li>
            <li>
                <a href="#" class="link">联系客服</a>
            </li>
        </ul>
    </div>
</div>
<div style="height: 20px;"></div>
<section class="cartMain">
    <div class="cartMain_hd">
        <ul class="order_lists cartTop">
            <li class="list_chk">
                <!--所有商品全选-->
                <input type="checkbox" id="all" value="all" class="whole_check">
                <label for="all"></label>
                全选
            </li>
            <li class="list_con">商品信息</li>
            <li class="list_info">商品参数</li>
            <li class="list_price">单价</li>
            <li class="list_amount">数量</li>
            <li class="list_sum">金额</li>
            <li class="list_op">操作</li>
        </ul>
    </div>

    <!--底部-->
    <div class="bar-wrapper">
        <div class="bar-right">
            <div class="piece">已选商品<strong class="piece_num">0</strong>件</div>
            <div class="totalMoney">共计: <strong class="total_text">0.00</strong></div>
            <div class="calBtn"><a href="javascript:;">结算</a></div>
        </div>
    </div>
</section>
<section class="model_bg"></section>
<section class="my_model">
    <p class="title">删除宝贝<span class="closeModel">X</span></p>
    <p>您确认要删除该宝贝吗？</p>
    <div class="opBtn"><a href="javascript:;" class="dialog-sure">确定</a><a href="javascript:;"
                                                                           class="dialog-close">关闭</a></div>
</section>
<script src="/static/js/shoppingjs/jquery.min.js"></script>
<script src="/static/js/shoppingjs/shopping.js"></script>
<script src="/static/js/ajax.js"></script>
<script src="/static/plugins/layui/layui.js"></script>
<#if Session["userid"]?exists>
    <input type="hidden" id="username" value="${Session["userid"]}">
</#if>
<script>
    $(document).ready(function () {
        var userName = $("#username").val();
        //登录成功后
        loginSuccess();
        //获取购物车数量
        $.ajax({
            url: "/getShopcartNum",
            data: {userName: userName},
            type: "post",
            success: function (res) {
                if (res.code === 0) {
                    $("#cartNum").html(res.data);
                }
            }
        });
        //获取购物车数量
        $.ajax({
            url: "/getOrderNum",
            data: {userName: userName},
            type: "post",
            success: function (res) {
                if (res.code === 0) {
                    $("#orderNum").html(res.data);
                }
            }
        });
    });

    function loginSuccess() {
        var user = $("#username").val();
        if (user == null || user == "" || user.length == 0) {

        } else {
            str = `<p id="userhover" style="margin-left: 50px">欢迎，` + user + `</p>`;
            $("#loginuser").html(str);
        }
    }
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        $("#userhover").click(function () {
            layer.confirm('亲！您确定要退出登录吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                // layer.msg('的确很重要', {icon: 1});
                window.location.href="/loginout.html";
            }, function(){

            });

        });
        //我的订单
        $("#myOrder").click(function (){
            //iframe层-父子操作
            layer.open({
                type: 2,
                title: '我的订单',
                shadeClose: true,
                shade: false,
                maxmin: true, //开启最大化最小化按钮
                area: ['1100px', '700px'],
                content: '../static/myOrder.html'
            });
        });
    });
</script>
</body>

</html>